<template>
  <view class="flex">
    <view class="title flex">
      <span class="mr16">{{ name }}</span>
      <!-- <ve-tooltip v-if="tooltip" :content="tooltip" :placement="placement">
        <ve-icon class="r" name="headertipsgray" size="28" />
      </ve-tooltip> -->
      <ve-tooltip v-if="tooltip || $slots.tipcontent" :placement="placement">
        <template #content>
          <slot v-if="$slots.tipcontent" name="tipcontent"></slot>
          <view v-else v-for="item in rendertooltip(tooltip)" :key="item">{{ item }}</view>
        </template>
        <ve-icon name="headertipsgray" size="28" />
      </ve-tooltip>
    </view>
    <view v-if="num" class="count-view">车辆总数：{{ num }}辆</view>
    <slot name="tab"></slot>
  </view>
</template>
<script setup>
  const props = defineProps({
    name: {
      type: String,
      default: '',
    },
    tooltip: {
      type: String,
      default: '',
    },
    placement: {
      type: String,
      default: 'top',
    },
    num: {
      type: Number,
      default: null,
    },
  })
  const rendertooltip = (tooltip) => {
    if (tooltip.length > 10) {
      let regex = /.{1,10}/g
      return tooltip.match(regex)
    } else {
      let arr = []
      arr.push(tooltip)
      return arr
    }
  }
</script>

<style lang="less" scoped>
  .flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .title {
    font-size: 30rpx;
    font-family: PingFang SC-Semibold, PingFang SC;
    font-weight: 600;
    color: #191c27;
    margin-bottom: 8rpx;
  }
  .count-view {
    font-size: 24rpx;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #3370ff;
    line-height: 28rpx;
  }
  .mr16 {
    margin-right: 16rpx;
  }
</style>
